<template>
  <div class="my-container">
    <!-- 顶部用户信息 -->
    <div class="profile-section">
      <div class="profile-info">
        <img :src="profileImage" alt="Profile" class="profile-image" />
        <div class="user-details">
          <h2>{{ username }}</h2>
          <el-button type="text" @click="switchAccount">切换账号</el-button>
        </div>
      </div>
    </div>

    <!-- 功能列表 -->
    <div class="function-section">
      <el-divider></el-divider>
      <el-row
        class="function-list"
        v-for="(item, index) in menuItems"
        :key="index"
        @click="navigateTo(item.path)"
      >
        <el-col span="22">{{ item.title }}</el-col>
        <el-col span="2" class="menu-arrow">></el-col>
      </el-row>
      <el-divider></el-divider>
    </div>

    <!-- 引入底部导航栏组件 -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from '/src/views/BottomNav.vue'; // 根据您的文件路径调整

export default {
  components: {
    BottomNav
  },
  data() {
    return {
      username: "admin",
      profileImage: "src/assets/images/start-page/admin.png",
      menuItems: [
        { title: "农机状态报告", path: "/Pdreports" },
        { title: "虫害检测报告", path: "/Ddreports" },
        { title: "修改密码", path: "/password" },
        { title: "意见反馈", path: "/feedback" },
      ],
    };
  },
  methods: {
    switchAccount() {
      console.log("切换账号逻辑待实现");
    },
    navigateTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
.my-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置为视口的高度 */
  justify-content: space-between;
  background: linear-gradient(to bottom, #ffffff, rgb(196, 253, 196)); /* 渐变背景 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden; /* 禁止页面滚动 */
}

.profile-section {
  padding: 20px;
  flex-shrink: 0;
}

.profile-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.profile-image {
  width: 50px; /* 设置为合适的头像大小 */
  height: 50px; /* 设置为合适的头像大小 */
  border-radius: 50%; /* 圆形效果 */
  margin-right: 10px; /* 右侧间距 */
}

.function-section {
  flex-grow: 1;
  overflow: auto;
  padding: 10px 20px;
}

.function-list {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

.menu-arrow {
  text-align: right;
}

/* 删除原有的底部导航栏样式 */
</style>
